<style lang="less">
    @import 'own-space.less';
</style>

<template>
    <div>
        <Card>
            <p slot="title">
                <Icon type="person"></Icon>
                个人信息
            </p>
            <div>
                <Form
                        ref="user"
                        :model="user"
                        :label-width="100"
                        label-position="right"
                        :rules="infoValidate"
                >
                    <FormItem label="姓名：" prop="name">
                        <div style="display:inline-block;width:300px;">
                            <span>{{ user.name }}</span>
                        </div>
                    </FormItem>
                    <FormItem label="账号：">
                        <span>{{ user.account }}</span>
                    </FormItem>
                    <FormItem label="工号：">
                        <span>{{ user.employeeNumber }}</span>
                    </FormItem>
                    <FormItem label="手机：">
                        <span>{{ user.mobile }}</span>
                    </FormItem>

                    <FormItem label="邮箱：">
                        <span>{{ user.email }}</span>
                    </FormItem>
                    <FormItem label="登录密码：">
                        <Button type="text" size="small" @click="showEditPassword">修改密码</Button>
                    </FormItem>
                    <div>
                    </div>
                </Form>
            </div>
        </Card>
        <Modal v-model="editPasswordModal" :closable='false' :mask-closable=false :width="500">
            <h3 slot="header" style="color:#2D8CF0">修改密码</h3>
            <Form ref="editPasswordForm" :model="editPasswordForm" :label-width="100" label-position="right"
                  :rules="passwordValidate">
                <FormItem label="原密码" prop="oldPassword" :error="oldPasswordError">
                    <Input v-model="editPasswordForm.oldPassword" placeholder="请输入现在使用的密码"></Input>
                </FormItem>
                <FormItem label="新密码" prop="newPassword">
                    <Input v-model="editPasswordForm.newPassword" placeholder="请输入新密码，至少6位字符"></Input>
                </FormItem>
                <FormItem label="确认新密码" prop="repeatPassword">
                    <Input v-model="editPasswordForm.repeatPassword" placeholder="请再次输入新密码"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancelEditPassword">取消</Button>
                <Button type="primary" :loading="savePasswordLoading" @click="saveEditPassword">保存</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import md5 from 'js-md5';
    import auth from '../../../app/common/auth/auth';
    import personal from '../../../app/api/own/personal';
    import prompt from '@/libs/prompt';

    export default {
        name: 'ownspace_index',
        data() {
            const validePhone = (rule, value, callback) => {
                var re = /^1[0-9]{10}$/;
                if (!re.test(value)) {
                    callback(new Error('请输入正确格式的手机号'));
                } else {
                    callback();
                }
            };
            const valideRepeatPassword = (rule, value, callback) => {
                if (value !== this.editPasswordForm.newPassword) {
                    callback(new Error('两次输入密码不一致'));
                } else {
                    callback();
                }
            };
            return {
                user: {
                    id: '',// 用户Id
                    account: '',// 帐号
                    password: '',// 密码
                    createTime: '',// 建立时间
                    updateTime: '',//
                    flag: '',// 有效标志 1：启用 0：停用
                    employeeNumber: '',
                    name: '',// 姓名
                    gender: '',// 性别,1:男 2:女 3:保密
                    // /基本信息
                    avatar: '',// 自定义照片
                    mobile: '',// 手机
                    email: '',// 电子信箱
                    qq: '',// qq
                    identityCard: '',// 身份证号码
                    remark: '',// 备注
                    introduce: '',// 个人简介
                    type: 1,// 用户类型 0：超级管理员 1：普通管理员
                },
                editPasswordModal: false, // 修改密码模态框显示
                savePasswordLoading: false,
                oldPasswordError: '',
                infoValidate: {
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ],
                    cellphone: [
                        {required: true, message: '请输入手机号码'},
                        {validator: validePhone}
                    ]
                },
                editPasswordForm: {
                    oldPassword: '',
                    newPassword: '',
                    repeatPassword: ''
                },
                passwordValidate: {
                    oldPassword: [
                        {required: true, message: '请输入原密码', trigger: 'blur'}
                    ],
                    newPassword: [
                        {required: true, message: '请输入新密码', trigger: 'blur'},
                        {min: 6, message: '请至少输入6个字符', trigger: 'blur'},
                        {max: 32, message: '最多输入32个字符', trigger: 'blur'}
                    ],
                    repeatPassword: [
                        {required: true, message: '请再次输入新密码', trigger: 'blur'},
                        {validator: valideRepeatPassword, trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            init() {
                this.load();
            },
            showEditPassword() {
                this.editPasswordModal = true;
            },
            cancelEditUserInfor() {
                this.$store.commit('removeTag', 'ownspace_index');
                localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
                let lastPageName = '';
                if (this.$store.state.app.pageOpenedList.length > 1) {
                    lastPageName = this.$store.state.app.pageOpenedList[1].name;
                } else {
                    lastPageName = this.$store.state.app.pageOpenedList[0].name;
                }
                this.$router.push({
                    name: lastPageName
                });
            },
            saveEdit() {
                this.$refs['userForm'].validate((valid) => {
                    if (valid) {
                        if (this.phoneHasChanged && this.userForm.cellphone !== this.initPhone) { // 手机号码修改过了而且修改之后的手机号和原来的不一样
                            if (this.hasGetIdentifyCode) { // 判断是否点了获取验证码
                                if (this.identifyCodeRight) { // 判断验证码是否正确
                                    this.saveInfoAjax();
                                } else {
                                    this.$Message.error('验证码错误，请重新输入');
                                }
                            } else {
                                this.$Message.warning('请先点击获取验证码');
                            }
                        } else {
                            this.saveInfoAjax();
                        }
                    }
                });
            },
            cancelEditPassword() {
                this.editPasswordModal = false;
            },
            saveEditPassword() {
                var own = this;
                this.$refs['editPasswordForm'].validate((valid) => {
                    if (valid) {
                        var newPassword = own.editPasswordForm.newPassword;
                        var oldPassword = own.editPasswordForm.oldPassword;
                        newPassword = md5(newPassword);
                        oldPassword = md5(oldPassword);
                        own.savePassLoading = true;
                        personal.updatePassword('', newPassword, oldPassword, function (data) {
                            own.savePassLoading = false;
                            var info = data.info;
                            if(info.success){
                                own.editPasswordModal = false;
                                auth.setPassword(newPassword);
                                prompt.message(info, '修改成功。', '修改失败！');
                            }
                        });
                    }
                });
            }, load() {
                var own=this;
                personal.info('', function (data) {
                    var info = data.info;
                    var body = data.body;
                    if (body && body.admin) {
                        own.user = body.admin;
                    } else {
                        var user = {
                            id: '',// 用户Id
                            account: '',// 帐号
                            password: '',// 密码
                            createTime: '',// 建立时间
                            updateTime: '',//
                            flag: '',// 有效标志 1：启用 0：停用
                            employeeNumber: '',
                            name: '',// 姓名
                            gender: '',// 性别,1:男 2:女 3:保密
                            // /基本信息
                            avatar: '',// 自定义照片
                            mobile: '',// 手机
                            email: '',// 电子信箱
                            qq: '',// qq
                            identityCard: '',// 身份证号码
                            remark: '',// 备注
                            introduce: '',// 个人简介
                            type: 1,// 用户类型 0：超级管理员 1：普通管理员
                        };
                        own.user = user;
                    }
                });
            }
        },
        mounted() {
            this.init();
        }
    };
</script>
